<template>
	<view>
		<image v-if="isbg" src="" class="navbarbg" mode="" :style="{background:'linear-gradient(#ced8e7, '+bg+')'}"></image>
		<u-navbar :leftIcon='leftIcon' leftIconSize='32rpx' :title="title" :height='height' :placeholder='placeholder'
			leftIconColor='#1E1E1E' :bgColor="`rgba(255,255,255,${opacity})`" :autoBack="autoBack">
			<view class="" slot="left" v-if="!autoBack">
				<slot name="leftbtn"></slot>
			</view>
			<view class="" slot="center" v-if="!title">
				<slot name="centerbtn"></slot>
			</view>
			<view class="" slot="right">
				<slot name="rightbtn"></slot>
			</view>
		</u-navbar>
	</view>
</template>

<script>
	export default {
		name: "navbar",
		props: {
			autoBack: {
				default: true,
				type: Boolean
			},
			title: {
				default: '',
				type: String
			},
			leftIcon: {
				default: 'arrow-left',
				type: String
			},
			opacity: {
				default: 0,
				type: Number
			},
			isbg: {
				default: true,
				type: Boolean
			},
			placeholder: {
				default: true,
				type: Boolean
			},
			bg: {
				default: "#f0f3f7",
				type: String
			},
			height:{
				default:'44px',
				type:String
			}
		},
		data() {
			return {};
		},
		methods: {
			rightClick() {
				console.log(12313123)
			}
		},

	}
</script>

<style lang="scss">
	.navbarbg {
		width: 750rpx;
		height: 402rpx;
		position: fixed;
		top: 0;
		left: 0;

		// z-index: -1;
	}

	::v-deep.u-navbar__content__title {
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 34rpx;
		color: #1E1E1E;
		line-height: 34rpx;
	}

	::v-deep.uicon-arrow-left {
		font-weight: 800 !important;
	}
</style>